<template>
    <div class="chatBox">
        <div class="center" v-chats="chatArray">
            <!-- 信息显示框 -->
            <div class="pareDiv" v-for="(msg,k) in chatArray" v-html="msg" :key="k">

            </div>
        </div>
        <div class="send">
            <div class="textBox">
                <div class="dele" @click="deleMess"></div>
                <div class="bq" @click="openBQ"></div>
                <div class="TextCenter" contenteditable="true" v-getEnlemt="setEnlemt" @blur="onBurl" @focus="onfous"></div>
                <div class="sendInput" @click="openSudo"></div>
                <!-- 快捷 -->
                <div class="sudoText" v-show="sudoShow">
                    <ul>
                        <li @click="qureMsg('哦')">哦</li>
                        <li @click="qureMsg('好了，好了，我知道了')" >好了，好了，我知道了</li>
                        <li @click="qureMsg('是吗？')" >是吗？</li>
                        <li @click="qureMsg('不会是真的吧')">不会是真的吧！</li>
                    </ul>
                </div>
                <!-- 表情选项 -->
                <div class="bqBox" v-show="bqShow">
                    <div class="bqEd">
                        <div>
                            <img :src="src" alt="" @click="pushBQ(src)" v-for="(src,idx) in bqArray" :key=idx>
                        </div>
                    </div>
                </div>
                <!-- 链接发生断开 -->
                <div class="error" v-show="errorShow">
                    链接聊天室失败，请点击此处重新链接
                </div>
            </div>
            <div class="sendsend" @click="sendMsg" >发送</div>
        </div>
    </div>
</template>
<script>
export default {
    name:"chat",
    props:["Room"],
	data(){
		return {
			bqArray:[
				"./static/img/bq/q1.png","./static/img/bq/q2.png","./static/img/bq/q3.png",
				"./static/img/bq/q4.png","./static/img/bq/q5.png","./static/img/bq/q6.png",
				"./static/img/bq/q7.png","./static/img/bq/q8.png","./static/img/bq/q9.png",
				"./static/img/bq/q10.png","./static/img/bq/q11.png","./static/img/bq/q12.png",
				"./static/img/bq/q13.png","./static/img/bq/q14.png","./static/img/bq/q15.png",
				"./static/img/bq/q16.png","./static/img/bq/q17.png","./static/img/bq/q18.png",
				"./static/img/bq/q19.png",
				"./static/img/bq/q20.png","./static/img/bq/q21.png","./static/img/bq/q22.png",
				"./static/img/bq/q23.png","./static/img/bq/q24.png","./static/img/bq/q25.png",
				"./static/img/bq/q26.png","./static/img/bq/q27.png","./static/img/bq/q28.png",
				"./static/img/bq/q29.png","./static/img/bq/q30.png","./static/img/bq/q31.png",
				"./static/img/bq/q32.png","./static/img/bq/q33.png","./static/img/bq/q34.png",
				"./static/img/bq/q35.png","./static/img/bq/q36.png","./static/img/bq/q37.png",
				"./static/img/bq/q38.png","./static/img/bq/q39.png","./static/img/bq/q40.png",
				"./static/img/bq/q41.png","./static/img/bq/q42.png","./static/img/bq/q43.png",
				"./static/img/bq/q44.png","./static/img/bq/q45.png","./static/img/bq/q46.png",
				"./static/img/bq/q47.png","./static/img/bq/q48.png","./static/img/bq/q49.png",
				"./static/img/bq/q50.png"
			],
			bqShow:false,
			sudoShow:false,
			textObj:null,
			fursObj:null,
			socket:null,
			chatArray:[],
			errorShow:false
		}
	},
	computed:{
		RoomNunber(){
			let a;
			let Room=this.Room;
			if(Room.GType==1){
				a="B"+Room.TId;
			}
			else if(Room.GType==2){
				a="L"+Room.TId;
			}
			return a;
		},
		name(){
			let a=this.$store.getters.Init.UId;
			let b=a.substr(0,2);
			a=a.replace(b,"**");
			return a;
		}
	},
	watch:{
		"RoomNunber":function(newVla,oldVal){
			if(newVla!=oldVal){
				let msg={type:2,oldRoom:oldVal,room:newVla};
				msg=JSON.stringify(msg);
				if(this.socket.getStatus==1){
					this.socket.uSend(msg);
				}
			}
		}
	},
	directives:{
		getEnlemt:{
			bind(el,bind){
				bind.value(el);
			}
		},
		chats:{
			componentUpdated(el){
				el.scrollTop=el.scrollHeight;
			}
		}
	},
	methods:{
		openBQ(){
			this.bqShow=!this.bqShow;
		},
		openSudo(){
			this.sudoShow=!this.sudoShow;
		},
		setEnlemt(x){
			this.textObj=x;
		},
		onfous(){
			this.bqShow=false;
			this.sudoShow=false;
		},
		onBurl(){
			let a=window.getSelection().getRangeAt(0);
			this.fursObj=a;
		},
		pushBQ(x){
			let BQ=new Image();
			BQ.src=x;
			BQ.onload=()=>{
				if(this.fursObj){
					this.textObj.focus();
					var a=window.getSelection()
					a.removeAllRanges()
					a.addRange(this.fursObj)
					this.fursObj.insertNode(BQ);
					a.collapse(this.textObj,this.textObj.childNodes.length);	
					this.fursObj=null;		
				}
				else{
					this.textObj.appendChild(BQ);
				}
			}
		},
		message(msg){
			let a=JSON.parse(msg.data);
			if(a.type&&a.type==10){
				return false;
			}
			else{
				let b="<div class='name'>"+a.name+":</div><div class='Msg'>"+a.msg+"</div>";
				this.chatArray.push(b);
			}
		},
		sendMsg(){
			let a=this.textObj.innerHTML;
			if(a==""){
				return false;
			}
			let msg={type:3,name:this.name,msg:a,room:this.RoomNunber};
			msg=JSON.stringify(msg);
			this.socket.uSend(msg);
			this.textObj.innerHTML="";
			this.bqShow=false;
			this.sudoShow=false;
		},
		qureMsg(x){
			let msg={type:3,name:this.name,msg:x,room:this.RoomNunber};
			msg=JSON.stringify(msg);
			this.socket.uSend(msg);
			this.bqShow=false;
			this.sudoShow=false;
		},
		error(){
			this.errorShow=true;
		},
		deleMess(){
			this.textObj.innerHTML="";
		},
		starSocket(){
				function suceenSocket(){
					let a={type:1,room:this.RoomNunber+""};
					a=JSON.stringify(a);
					this.socket.uSend(a)
				}
				this.socket=new tomSocket(Api.ws,suceenSocket.bind(this),'{"type":10}',50000,this.message,this.error)
		},

	},
	mounted(){
		this.starSocket();
	},
	beforeDestroy(){
		this.textObj=null;
		this.fursObj=null;
		this.socket.close();
		this.socket=null;
	}
}
</script>
